<template>
    <main>
        <header>
            <div class="header">
                <div class="back" @click="back()">
                    <font-awesome-icon icon="chevron-left" class="ico_back"/>
                </div>
                <div class="header_title">
                    <span>确认订单</span>
                    <span>00:00</span>
                </div>
            </div>
            <div class="item_content">
                <div>设置收货地址</div>
                <font-awesome-icon icon="chevron-right" class="ico_go"/>
            </div>
        </header>
        <section>
            <div class="contain_box">
                <div class="cart_title"><span>唯品自营</span><div class="cart_line"></div></div>
                <div class="normal_product">
                    <ul>
                        <li v-for="(item,index) in list">
                            <img :src="item.src" alt="" class="product_img">
                            <font-awesome-icon :icon="[circles[index], 'circle']" class="ico_circle" @click="change_one(index)"/>
                            <div class="list_item">
                                <div class="list_box">
                                    <span class="item_name">{{item.name}}</span>
                                    <div class="item_price">{{item.price}}</div>
                                </div>
                                <p class="item_p">{{item.color}}; {{item.size}}</p>
                                <div class="item_favorable">
                                    <span>7天可退</span>
                                    <span>退货无忧</span>
                                </div>
                                <div class="item_c">
                                    <div class="item_stock">
                                        <a href="javascript:;" class="reduce" @click="reduce(index)"> 
                                            <font-awesome-icon icon="minus" class="ico_minus"/>
                                        </a>
                                        <span class="item_num">
                                            <!-- <input type="text" pattern="[0-9]{2}" maxlength="2" v-model="num"> -->
                                            {{item.count}}
                                        </span>                                   
                                        <a href="javascript:;" class="add" @click="add(index)">
                                            <font-awesome-icon icon="plus" class="ico_plus"/>
                                        </a>
                                    </div>
                                    <div class="item_del">
                                        <font-awesome-icon icon="times" class="ico_times"/>
                                    </div>
                                </div>
                            </div>                            
                        </li>
                        <li>
                            <div class="cart_total">￥{{total}}</div>
                            <div class="cart_line1"></div>
                            <span style="display:none">{{msg}}</span>
                            <font-awesome-icon :icon="[all, 'circle']" class="ico_circle" @click="change()"/>   
                        </li>
                    </ul>
                </div>
            </div>
            <div class="contain_box1">
                <div class="conpon">
                    <span>已选择1张优惠券</span>
                    <font-awesome-icon icon="chevron-right" class="ico_right"/>
                    <div class="cart_line"></div>
                </div>
                <div class="conpon_select">
                    <div class="conpon_select_left">
                        <label for="">优惠券</label>
                        <span>-￥20</span>
                    </div>
                    <p>[品类券 | 运动户外、男鞋、男装、女装、母婴、女鞋(限唯品会自营)]</p>
                </div>
            </div>
            <div class="contain_box1">
                <div class="total_all">
                    订单金额
                    <span>￥{{sale}}</span>
                    <div class="cart_line"></div>
                </div>
                <ul class="total_ul">
                    <li>
                        <p>
                            商品总金额
                            <span>￥{{total}}</span>
                        </p>
                    </li>
                    <li>
                        <p>
                            总运费
                            <span>￥0.00</span>
                        </p>                       
                    </li>
                    <li>
                        <p>
                            优惠券折扣
                            <span>-￥20</span>
                        </p>                     
                    </li>
                </ul>
            </div>
            <div class="contain_box1">
                <p class="invoice">开具发票(自然量暂不支持开具发票)</p>
            </div>
        </section>
        <footer>
            <div class="cart_box">
                <div class="totol_money">
                    还需支付: <span class="totol_money_span">￥{{sale}}</span>
                </div>
                <div class="totol_pay">
                    <button class="totol_btn">在线支付</button>
                </div>
            </div>
        </footer>
    </main>
</template>
<script>
    export default {
        data(){
            return{
                list:[],
                a:[],
                pre:[],
                circles:[],
                all:'far',
                msg:0,
            }
        },
        mounted(){
            this.$http.get('./data/checkout.json')
            .then((response)=> {
                console.log(response);
                this.list=response.data.list
                for(var i=0;i<this.list.length;i++){
                    this.circles.push('far')
                }
                this.a=response.data.total
                this.pre=response.data.pre
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // always executed
            });
            
        },
        methods:{
            add(index){
                this.list[index].count+=1;
            },
            reduce(index){
                if(this.list[index].count>2){
                    this.list[index].count-=1
                }else{
                    this.list[index].count=1
                }
            },
            change(){
                this.msg++;
                if(this.all=='far'){
                    for(var i=0;i<this.list.length;i++){
                        this.circles[i]='fas'
                    } 
                    this.all='fas' 
                }else{
                    for(var i=0;i<this.list.length;i++){
                        this.circles[i]='far'
                    }
                    this.all='far' 
                }  
            },
            change_one(index){
                this.msg++;
                this.circles[index]=='far'?this.circles[index]='fas':this.circles[index]='far'
                var a=Array.from(new Set(this.circles))
                if(a.length==1){
                    this.circles[0]=='far'?this.all='far':this.all='fas'  
                }else{
                    this.all='far'
                }
            },
            back(){
                this.$router.go(-1)
            }
        },
        computed:{
            total(){
                this.msg++;
                this.a=0;
                for(let i=0;i<this.list.length;i++){
                    if(this.circles[i]=='fas'){
                        this.a=this.a+parseInt((this.list[i].price).split('￥')[1])*this.list[i].count
                    }
                }
                return this.a
            },
            sale(){
                if(this.a-this.pre>=0){
                    return this.a-this.pre
                }else{
                    return 0
                }               
            }
        }
    }
</script>
<style scoped>
    main{
        background-color: #f3f4f5;
        padding-bottom: 40vw;
    }
    main:after{
        content: "";
        display: table;
        clear: both;
    }
    .contain_box{
        position: relative;
        margin-top: 2vw;
        background: #fff;
    }
    .contain_box:after{
        content: "";
        display: table;
        clear: both;
    }
    .contain_box1{
        margin-top: 2vw;
        padding: 0 3vw;
        background: #fff;
        position: relative;
    }
    .contain_box1:after{
        content: "";
        display: table;
        clear: both;
    }
    .header{
        background: #fff;
        position: relative;
    }
    .header:after{
        content: "";
        display: table;
        clear: both;
    }
    .back{
        position: absolute;
        padding: 4vw 4vw;
        z-index: 2;
    }
    .ico_back{
        font-size: 6vw;
    }
    .header_title{
        /* position: absolute; */
        text-align: center;
        width: 100%;
        height: 14vw;
        line-height: 14vw;
    }
    .header_title>span{
        font-size: 5vw;
    }
    .header_title>span:nth-of-type(2){
        color: #e80080;
    }
    .item_content{
        padding: 4vw;
        background: #656c89;
    }
    .item_content>div{
        color: #fff;
        font-size: 4vw;
        display: inline-block;
    }
    .ico_go{
        color: #fff;
        font-size: 5vw;
        float: right;
    }
    .cart_title>span{
        display: inline-block;
        font-size: 4vw;
        height: 8vw;
        line-height: 8vw;
    }
    .cart_title{
        position: relative;
        padding: 2vw 0vw;
        margin: 0 4vw;
    }
    .normal_product{
        padding: 0 4vw 4vw 4vw;
    }
    .normal_product li{
        position: relative;
        padding: 4vw 0;
    }
    .normal_product li:after{
        content: "";
        display: table;
        clear: both;
    }
    .product_img{
        width: 18vw;
        height: 22.676vw;
    }
    .ico_circle{
        position: absolute;
        left: 1vw;
        bottom: 6vw;
        width: 3vw;
        height: 3vw;
        color:#83878f;
    }
    .list_item{
        width: 71vw;
        float: right;
    }
    .item_name{
        -webkit-box-flex: 1;
        display:-webkit-box;
        font-size: 4vw;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .item_price{
        font-size: 4vw;
    }
    .list_box{
        display: flex;
        margin-bottom: 2vw;
    }
    .item_p{
        color:#999;
        margin-bottom: 2vw;
    }
    .item_favorable{
        margin-bottom: 2vw;
    }
    .item_favorable>span{
        color:#627db6;
        background: #edf3ff;
        padding: 0 1vw;
        border-radius: 4vw;
    }
    .item_stock{
        border: 1px solid #e7e7e7;
        border-left: 0;
        border-right: 0;
        display: inline-flex;
        align-items: center;
    }
    .ico_plus{
        color:#83878f;
    }
    .ico_minus{
        color:#83878f;
    }
    .item_num{
        width: 10vw;
        height: 4vw;
        margin: 0 0.5vw;
        text-align: center;
        color:#6a6f77;  
        position: relative; 
    }
    .item_num>input{
        /* display: inline-block; */
        left: 0;
        position: absolute;
        text-align: center;
        -web-kit-appearance:none;
        -moz-appearance: none;
        border:0;
        color:#6a6f77;
        outline:0;
        width: 10vw;
        height: 4vw;
        line-height: 4vw;
        background: transparent;
    }
    .reduce{
        border: 1px solid #e7e7e7;
        font-size: 4vw;
        padding: 0.5vw 1.5vw;
        border-top: 0;
        border-bottom: 0;
    }
    .add{
        border: 1px solid #e7e7e7;
        font-size: 4vw;
        padding: 0.5vw 1.5vw;
        border-top: 0;
        border-bottom: 0;
    }
    .ico_times{
        font-size: 5vw;
        color:#83878f;
    }
    .item_del{
        position: absolute;
        right:0;
        bottom: 0;
        /* padding: 1vw; */
        /* border: 1px solid #e7e7e7; */
    }
    .item_c{
        position: relative;
    }
    .cart_line{
        position: absolute;
        bottom: 0;
        width:100%;
        height: 1px;
        border-bottom: 1px solid #e7e7e7;
    }
    .cart_line1{
        position: absolute;
        top: 0;
        width:100%;
        height: 1px;
        border-bottom: 1px solid #e7e7e7;
    }
    .cart_total{
        height: 6vw;
        line-height: 6vw;
        text-align: right;
        font-size: 4vw;
    }
    .ico_right{
        color: #555;
        font-size: 5vw;
        float: right;
    }
    .conpon{
        position: relative;
        padding: 3vw 0 ;
    }
    .conpon>span{
        font-size: 4vw;
        color: #555;
    }
    .conpon_select{
        position: relative;
        /* line-height: 1.5; */
        padding: 2vw 0;
        font-size: 3vw;
        color: #999;
        word-break: break-all;
        word-wrap: break-word;
    }
    .conpon_select_left{
        float: left;
        margin-right: 3vw;
    }
    .conpon_select_left>label{
        border: 1px solid #c39d2e;
        color: #c39d2e;
        padding: 0 0.5vw;
        margin-right: 3vw;
    }
    .conpon_select>p{
        display:-webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .total_all{
        position: relative;
        height: 10vw;
        line-height: 10vw;
        text-align: left;
        font-size: 4vw;
        font-weight:900;
    }
    .total_all>span{
        float: right;
        color: #e4007f;
    }
    .total_ul{
        padding: 3vw 0;
    }
    .total_ul>li{
        line-height: 6vw;
        color: #555;
    }
    .total_ul>li span{
        float: right;
    }
    .invoice{
        padding: 2.5vw 0;
        color: #dbdbdb;
    }
    footer{
        width: 100vw;
        /* height: 15vw; */
    }
    .cart_box{
        padding: 3vw 4vw;
        position: fixed;
        bottom: 0;
        width: 100vw;
        /* height: 15vw; */
        border-top: 1px solid #ccc;
        background-color: #fff;
        margin-top: 2px;
    }
    .totol_money{
        text-align: center;
        margin-bottom: 2vw;
        font-size: 4vw;
    }
    .totol_money_span{
        font-size: 4vw;
        color: #e4007f;
    }
    .totol_btn{
        font-size: 4vw;
        border: 0;
        background: #e80080;
        width: 100%;
        color: #fff;
        line-height: 10vw;
        border-radius: 2px;
        outline:0;
    }
</style>